<template>
  <div style="padding: 10px;">
    <div class="bar" ref="scrolldiv">
      <div class="circle" tabindex="0" ref="scrollblock" style="top: -8px;left: 0px;transform: translateX(-8px);" @keydown="keyPress" @mousedown="blockMouseDown"></div>
      <!-- <div class="scaleDiv">
        <div class="scale" style="left: 0">{{ min }}</div>
        <div class="scale" style="right: 0">{{ max }}</div>
      </div> -->
      <div></div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    min: {
      type: Number,
      default: 0,
    },
    max: {
      type: Number,
      default: 100,
    },
    value:{
      type: Number,
      default: 50,
    }
  },
  data() {
    return {
      mousePoint: {},
      lvalue: this.value,
    };
  },
  watch:{
    value(val){
      this.lvalue = val;
      this.updateValue();
    }
  },
  mounted(){
    this.updateValue()
  },

  methods: {
    updateValue(){
      const scrolldiv = this.$refs.scrolldiv;
      const newLeft = (this.value-this.min)/(this.max - this.min) * scrolldiv.clientWidth;
      const scrollblock = this.$refs.scrollblock;
      scrollblock.style.left = newLeft + "px";
    },
    blockMouseDown(event) {
      this.$refs.scrollblock.focus();
      this.mousePoint.isDown = true;
      this.mousePoint.X = event.clientX;
      const scrollblock = this.$refs.scrollblock;
      this.mousePoint.left = parseFloat(scrollblock.style.left);
      window.addEventListener("mousemove", this.blockMouseMove);
      window.addEventListener("mouseup", this.mouseUp);
      event.preventDefault(); // 阻止默认行为
    },
    blockMouseMove(event) {
      if (this.mousePoint.isDown == true && event.movementX != 0) {
        const x = event.clientX - this.mousePoint.X;
        const scrollblock = this.$refs.scrollblock;
        const scrolldiv = this.$refs.scrolldiv;
        let newLeft = this.mousePoint.left + x;
        newLeft = Math.max(0, newLeft);//最小为0
        newLeft = Math.min(scrolldiv.clientWidth, newLeft);//最大为宽度
        scrollblock.style.left = newLeft + "px";
        const value = parseInt((newLeft / scrolldiv.clientWidth) * (this.max-this.min)+this.min);
        this.lvalue = value
        requestAnimationFrame(() => {
          scrollblock.style.left = newLeft + "px";
        });
      }
    },
    mouseUp(event){
        this.mousePoint.isDown = false;
        
        window.removeEventListener('mousemove',this.blockMouseMove)
        window.removeEventListener('mouseup',this.mouseUp)
        this.updateFromLocalValue();
    },
    keyPress(event){
        if(event.key === 'ArrowRight'){
          this.lvalue = Math.min(this.max, this.lvalue+10)        
        }else if(event.key === 'ArrowLeft'){
          this.lvalue = Math.max(this.lvalue - 10,this.min);
        }
        this.updateFromLocalValue();
    },
    updateFromLocalValue(){
        this.$emit("update:value", this.lvalue);
        this.$emit("changed",this.lvalue)
    }
  },
};
</script>

<style scoped>
.bar {
  position: relative;
  margin: 0px;
  padding: 0px;
  display: block;
  width: 100%;
  height: 1px;
  background: var(--theme-primary-color, #0066ff);
}
.scaleDiv {
  position: absolute;
  top: 10px;
  padding: 0px;
  display: block;
  width: 100%;
  height: 1px;
}
.scale {
  position: absolute;
  font-size: 5px;
  top: 0;
}
.circle {
  width: 16px;
  height: 16px;
  display: block;
  background: var(--theme-primary-color, #0066ff);
  position: absolute;
  /* border: 1px solid var(--theme-primary-color, #0066ff); */
  box-sizing: border-box;
  border-radius: 15px;
}
.circle:focus{
  outline: 2px solid var(--theme-highlight-slim-color,rgb(141, 167, 255));
}
</style>
